<template>
  <div class="aside">
    <!-- 头像 -->
    <div class="top">
        <div></div>
      </div>
      <!-- 菜单 -->
    <div class="aside_menu">
        <el-col :span="12">
        <div class="menu_title">在线问诊管理系统</div>
        <el-menu
          active-text-color="#ffd04b"
          background-color="transparent"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#fff"
          unique-opened
          router>
            <!-- 0 -->
            <el-menu-item index="/admin/class" >
              <el-icon><Menu /></el-icon>
              <span>科室管理</span>
            </el-menu-item>
             <!-- 1 -->
            <el-menu-item index="/admin/notes">
              <el-icon><BellFilled /></el-icon>
              <span>公告管理</span>
            </el-menu-item>
              <!-- 2 -->
            <el-sub-menu  index="3">
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>用户管理</span>
            </template>
              <el-menu-item index="/admin/users"><el-icon><Avatar /></el-icon>用户列表</el-menu-item>
          </el-sub-menu>
          <!-- 3 -->
          <el-sub-menu index="4">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span>医生管理</span>
            </template>
              <el-menu-item index="/admin/doctors">医生列表</el-menu-item>
          </el-sub-menu>
          <!-- 4 -->
          <el-sub-menu index="5">
            <template #title>
              <el-icon><Notebook /></el-icon>
              <span>论坛管理</span>
            </template>
              <el-menu-item index="/admin/articles">文章列表</el-menu-item>
          </el-sub-menu>
          <!-- 6 -->
          <el-sub-menu index="6">
            <template #title>
              <el-icon><Notebook /></el-icon>
              <span>签到管理</span>
            </template>
              <el-menu-item index="/admin/sign">签到列表</el-menu-item>
          </el-sub-menu>
          <!-- 5 -->
          <el-menu-item index="/login">
            <el-icon><Back /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
  </div>
    
  </template>
      
  <script setup>


  
  </script>
  <style scoped>
  .aside {
    width: 100%;
    /* height: 100%; */
    background: rgb(52, 48, 50);
    text-align: center;
  }
  /* LOGO容器 */
  .top {
    margin: 10px 0px;
    width: 90%;
    height: 120px;
    box-sizing: border-box;
    border-bottom: 1px solid white;
    display: flex;
    justify-content: center;
    place-items: center;
  }
  .top>div{
  width: 102px;
   height: 100px;
   background:url(../static/logo.png) no-repeat center center;
   border-radius: 50%; 
   background-size: contain;
   border: 2px solid white;
   transition: all 0.5s;
  }
  .top>div:hover{
    border: 2px solid rgb(181, 245, 240);
    opacity: 0.8;
  }
  /* logo图片 */

  /* APP 后台系统 */
  .menu_title{
    margin-top: 10px;
    color: white;
    letter-spacing: 3px;
    font-size: 20px;
    width: 200px;
    padding: 10px 5px 20px 5px;
    cursor:pointer
    /* border: 2px solid white; */
  }
  /* hover的项 */
  .el-menu-vertical-demo{
    width: 200px;
    border: 2px solid white;
    border: none !important;
    background-color: none;
  }
  /* 导航文字提示 */
  .el-menu-item-group {
    text-indent: 0px;
    text-align: left !important;
  }
  </style>
      